{extend name="base/common"}

{block name="style"}
<style>
    .mail-box .mail-ontact{
        width: 150px;
        min-width: 150px;
        overflow: hidden;
    }
    .mail-box .mail-subject{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 124px !important;
        min-width: 124px;
    }
    .mail-subject-div{
        width: 100px;
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mail-box .mail-main{
        width: calc(100% - 460px);
        position: absolute;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mail-date{
        width: 160px;
        min-width: 160px;
        overflow: hidden;
    }
    @media only screen and (max-width: 550px){
        .mail-date{
            display: none;
        }
    }
    .list_banner {width: 80px}
    .list_type {width: 80px}
</style>
{/block}

{block name="page-header"}

{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="mail-box-header">
            <form method="get" action="index.html" class="pull-right mail-search">
                <div class="input-group">
                    <input type="text" class="form-control input-sm" name="search" placeholder="搜索服务内容">
                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-sm btn-primary">搜索</button>
                    </div>
                </div>
            </form>
            <h2>公共场所服务</h2>
        </div>

        <div id="modal-form" class="modal fade" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form class="form-horizontal" method="post" action="{:Url('PublicArea/edit')}">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <h3 class="modal-title text-center"  name="dialog-title">编辑服务信息</h3>
                        </div>
                        <div class="modal-body">
                            <div class="form-group"><label class="col-sm-2 control-label">封面图片:</label>
                                <div class="col-sm-10">
                                    <input id="input-file" type="file" class="file">
                                    <sapn>
                                        {empty name="news.front_cover"}图片预览{else/}
                                        <a class="front_cover" href="{$news.front_cover}">
                                            <img class="front_cover_img" src="{$news.front_cover}"/>
                                        </a>
                                        {/empty}
                                    </sapn>
                                </div>
                            </div>
                            <div class="form-group"><label class="col-sm-2 control-label">服务简介</label>
                                <div class="col-sm-10"><input type="text" placeholder="服务简介" class="form-control" required="" name="abstract"></div>
                            </div>
                            <div class="form-group"><label class="col-sm-2 control-label">类型</label>
                                <div class="col-sm-10"><select class="form-control m-b" name="type">
                                    <option value="1">大厅广告位</option>
                                    <option value="2">二楼多功能厅</option>
                                    <option value="3">大堂LED灯</option>

                                </select></div>
                            </div>

                            <div class="form-group"><label class="col-sm-2 control-label">服务时间</label>
                                <div class="col-sm-10"><input type="text" placeholder="服务时间" class="form-control" required="" name="service_time"></div>
                            </div>
                            <div class="form-group"><label class="col-sm-2 control-label">服务价格</label>
                                <div class="col-sm-10"><input type="text" placeholder="服务价格" class="form-control" required="" name="price"></div>
                            </div>
                            <div class="form-group"><label class="col-sm-2 control-label">所属园区</label>
                                <div class="col-sm-10"><select class="form-control m-b" name="park_id">
                                    <option value="3">希垦园区</option>

                                </select></div>
                            </div>
                            <div class="form-group"><label class="col-sm-2 control-label">状态</label>
                                <div class="col-sm-10"><select class="form-control m-b" name="status">
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select></div>
                            </div>


                            </div>

                        <div class="modal-footer">
                            <button class="btn btn-primary ajax-post" type="submit" target-form="form-horizontal">保存</button>
                            <input type="hidden" name="id" value="">

                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="mail-box">
            <table class="table table-hover table-mail">

                <thead>
                <tr>
                    <th></th>
                    <th>id</th>
                    <th>服务类型</th>
                    <th>服务介绍</th>
                    <th>服务时间</th>
                    <th>所属园区</th>
                    <th>单价</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {volist name="list" id="vo"}
                <tr class="read">
                    <td class="check-mail">
                        <input type="checkbox" class="i-checks ids" name="ids[]" value="{$vo.id}">
                    </td>
                    <td class="mail-subject">
                        {$vo.id}
                    </td>
                    <td>
                        {$vo.type_text}
                    </td>
                    <td>
                        {$vo.abstract}
                    </td>
                    <td>
                        {$vo.service_time}
                    </td>
                    <td>
                        {$vo.park_id}
                    </td>
                    <td>
                        {$vo.price}
                    </td>
                    <td>
                        {$vo.status_text}
                    </td>
                    <td>
                        <a data-toggle="modal" title="修改" href="#modal-form" onclick="edit(this)" data-id="{$vo.id}" data-time="{$vo.service_time}" data-type="{$vo.type}" data-abstract="{$vo.abstract}"  data-img="{$vo.img}" data-price="{$vo.price}"  data-status="{$vo.status}"   data-park="{$vo.park_id}"    >编辑</a>
                        <a  href="{:Url('show','id='.$vo.id.'&&type='.$vo.type  )}" >查看预约</a>
                    </td>
                </tr>
                {/volist}
                </tbody>
            </table>
            <div class="btn-group pull-right">{$list->render()}</div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="/admin/js/plugins/iCheck/icheck.min.js"></script>
<script>
    $(document).ready(function(){
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
        $(".check-all").on("ifChanged",function(){
            $("tbody").find(".ids").iCheck("toggle");
        });
    });
    function edit(a) {

        var name =$(a).attr('data-name');
        $("input[name='id']").val($(a).attr('data-id'));
        $("input[name='abstract']").val($(a).attr('data-abstract'));
        $("select[name='type']").val($(a).attr('data-type'));
        $("input[name='service_time']").val($(a).attr('data-time'));
        $("select[name='status']").val($(a).attr('data-status'));
        $("input[name='price']").val($(a).attr('data-price'));
        $("input[name='park_id']").val($(a).attr('data-park'));
        $(".form-horizontal").attr('action', '{:Url("PublicArea/edit")}');
    }

    function sendFile(file) {
        var data = new FormData();
        data.append("file_data", file);
        $.ajax({
            data: data,
            type: "POST",
            url: "{:Url('Upload/picture')}",
            cache: false,
            contentType: false,
            processData: false,
            success: function(response) {
                var data = $.parseJSON(response);
                $(".summernote").summernote('insertImage', data.data, 'image name'); // the insertImage API
            }
        });
    }
    $("#input-file").fileinput({
        showPreview: false,
        language: 'zh', //设置语言
        uploadUrl: '{:Url("Upload/picture")}', //上传的地址
        allowedFileExtensions: ['png','jpg','gif','png','jpeg'],
        maxFileSize: 1024 * 200,
    }).on("filebatchselected", function(event, files) {
        $(this).fileinput("upload");
    }).on('fileuploaded', function(event, data, previewId, index) {
        var response = $.parseJSON(data.response);
        if(response.code == 1) {
            $("input[name='front_cover']").val(response.data);
        } else {
            updateAlert(response.msg, 'warning');
        }
    });

    $(".front_cover").imgbox({
        overlayShow: false,
        hideOnContentClick: true,
        slideshow: false,
        theme: 'dark',
        alignment: 'center',       // Position - may be auto OR center.
        allowMultiple: false,
    });
</script>
{/block}